import React from 'react';
import { Spin, Tag, Button, message } from 'antd';
import { ILiftingOperate, operateLiftingApi, ILiftStatus } from 'api/Lifting';
import { UpCircleOutlined, DownCircleOutlined, StopOutlined, ToolOutlined } from '@ant-design/icons';
import { IAreaLiftingControl } from 'api/LiftControl';
interface IProps {
    selectedArea: number;
    areaLiftLoading: boolean;
    areaLiftControl?: IAreaLiftingControl;
    getLiftControlByAreaRun: Function;
}
const LiftControl = (props: IProps) => {
    const { selectedArea, areaLiftLoading, areaLiftControl, getLiftControlByAreaRun } = props;
    /** 操作分组柱子 */
    const operateLifts = (lifts: any, type: number) => {
        const ids = lifts.map((lift: any) => lift.id).join(',');
        let params: any = { ids, type };
        if (type === ILiftingOperate['allUp'] || type === ILiftingOperate['allDown']) {
            params.areaId = selectedArea;
        }
        operateLiftingApi(params).then(() => {
            getLiftControlByAreaRun();
            message.success({ content: '操作成功', key: 'operation' });
        });
    };
    /** 操作未分组柱子 */
    const operateLift = (id: number, type: number) => {
        operateLiftingApi({ ids: id, type }).then(() => {
            getLiftControlByAreaRun();
            message.success({ content: '操作成功', key: 'operation' });
        });
    };
    /** 柱子图片 */
    const getLiftImage = (lift: any) => {
        const imageMap: any = {
            [ILiftStatus.down]: (
                <img src={require('assets/imgs/lift-down.png')} className="lifting" alt="" style={{ marginTop: 103 }} />
            ),
            [ILiftStatus.up]: <img src={require('assets/imgs/lift-up.png')} className="lifting" alt="" />,
        };
        return imageMap[lift.liftStatus];
    };
    /** 柱子操作  */
    const renderLiftOperationButton = (operate: Function, params: any) => {
        return (
            <>
                <div className="text-center mt20">
                    <Button onClick={() => operate(params, ILiftingOperate['up'])}>上升</Button>
                </div>
                <div className="text-center mt20">
                    <Button onClick={() => operate(params, ILiftingOperate['down'])}>下降</Button>
                </div>
            </>
        );
    };
    return (
        <Spin spinning={areaLiftLoading}>
            <div className="flex lifting-groups">
                {areaLiftControl?.groupFlag
                    ? areaLiftControl?.group?.map((liftingGroup) => (
                        <div key={liftingGroup.id} className="pb20">
                            <div className="lifting-group">
                                <Tag color="#87d068" className="lifting-group-name">
                                    {liftingGroup.name}
                                </Tag>
                                {liftingGroup.liftings.map((lift) => (
                                    <div key={lift.id}>
                                        <div className="text-center">{lift.orderNum}</div>
                                        {getLiftImage(lift)}
                                        {lift.status === -1 && <ToolOutlined className="error-lift" />}
                                    </div>
                                ))}
                            </div>
                            {renderLiftOperationButton(operateLifts, liftingGroup.liftings)}
                        </div>
                    ))
                    : areaLiftControl?.liftings?.map((lift) => (
                        <div key={lift.id} className="ungroup-lift text-center">
                            <div>{lift.orderNum}</div>
                            {getLiftImage(lift)}
                            {lift.status === -1 ? (
                                <>
                                    <ToolOutlined className="error-lift" />
                                    <div className="error-lift-font">待检修</div>
                                    <div>
                                        <StopOutlined className="error-lift-operate" />
                                    </div>
                                </>
                            ) : (
                                    renderLiftOperationButton(operateLift, lift.id)
                                )}
                        </div>
                    ))}
            </div>
            {areaLiftControl && areaLiftControl.onlineCount > 0 && (
                <div className="flex-between mt20">
                    <Button
                        className="one-key-up"
                        onClick={() => operateLifts([], ILiftingOperate['allUp'])}
                        icon={<UpCircleOutlined />}
                        size="large"
                    >
                        一键上升
                    </Button>
                    <Button
                        className="one-key-down"
                        onClick={() => operateLifts([], ILiftingOperate['allDown'])}
                        icon={<DownCircleOutlined />}
                        size="large"
                    >
                        紧急下降
                    </Button>
                </div>
            )}
        </Spin>
    );
};
export default LiftControl;
